<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/9/19
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传</title>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/js/jquery.form.js"></script>

</head>
<body>
    <h3>跨服务器上传文件</h3>
    <%--action,与method="post" 不在这里写，在函数中写--%>
    <form id="ajaxForm" enctype="multipart/form-data">

        <%--两个文件中的name的名称要相同--%>
        选择文件：<input type="file" name="file"><br>

        <%--异步上传，这里不可以是submit，因为不是整个表单提交，只是提交文件（图片等）
        否则会刷新页面--%>
        <input type="button" value="提交" id="btn">
    </form>

    <%--头像预览图   把表单中的图片提交到后台，再返回前端的img中--%>
    <img src="/" width="100px" id="header"/>

    <script>
        $(function () {
            //表单的异步提交
            $("#btn").click(function () {
                //异步提交表单
                $("#ajaxForm").ajaxSubmit({
                    url:"/fileUpload5",
                    type:"post",
                    success:function (data) {
                        //把表单中的图片提交到后台，再返回前端的img中
                        $("#header").attr("src",data);
                    }
                })
            })
        })
    </script>
</body>
</html>
